<template>
	<div style="width: 100%">
		<div v-if="editable" class="toolbar">
			<div class="iconfont icon-h1" :class="{ 'is-active': editor?.isActive('heading', { level: 1 }) }" @click="editor.chain().focus().toggleHeading({ level: 1 }).run()"></div>
			<div class="iconfont icon-h2" :class="{ 'is-active': editor?.isActive('heading', { level: 2 }) }" @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"></div>
			<div class="iconfont icon-h3" :class="{ 'is-active': editor?.isActive('heading', { level: 3 }) }" @click="editor.chain().focus().toggleHeading({ level: 3 }).run()"></div>
			<div class="iconfont icon-zitijiacu" :class="{ 'is-active': editor?.isActive('bold') }" @click="editor.chain().focus().toggleBold().run()"></div>
			<div class="iconfont icon-zitixiahuaxian" :class="{ 'is-active': editor?.isActive('underline') }" @click="editor.chain().focus().toggleUnderline().run()"></div>
			<div class="iconfont icon-zuoduiqi" :class="{ 'is-active': editor?.isActive({ textAlign: 'left' }) }" @click="editor.chain().focus().setTextAlign('left').run()"></div>
			<div class="iconfont icon-juzhongduiqi" :class="{ 'is-active': editor?.isActive({ textAlign: 'center' }) }" @click="editor.chain().focus().setTextAlign('center').run()"></div>
			<div class="iconfont icon-youduiqi" :class="{ 'is-active': editor?.isActive({ textAlign: 'right' }) }" @click="editor.chain().focus().setTextAlign('right').run()"></div>
			<div class="iconfont icon-a-daimakuai3x" :class="{ 'is-active': editor?.isActive('codeBlock') }" @click="editor.chain().focus().toggleCodeBlock().run()"></div>
			<div class="iconfont icon-quotation" :class="{ 'is-active': editor?.isActive('blockquote') }" @click="editor.chain().focus().toggleBlockquote().run()"></div>
			<div class="iconfont icon-tupian" :class="{ 'is-active': photo }" @click="key++, (photo = true)"></div>
			<!-- <div @click="editor.chain().focus().toggleBold().run()">加粗</div> -->
		</div>
		<div :class="editable ? 'edibox' : ''">
			<el-scrollbar :height="height + 'px'" always>
				<editor-content style="width: 100%" :editor="editor" />
			</el-scrollbar>
		</div>
		<photoalbum v-if="photo" @send-img="image" :key="key"></photoalbum>
	</div>
</template>

<script>
	import photoalbum from '@/components/photoalbum.vue'
	import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
	import { common, createLowlight } from 'lowlight'
	// import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
	import { Editor, EditorContent } from '@tiptap/vue-3'
	import Underline from '@tiptap/extension-underline'
	import TextAlign from '@tiptap/extension-text-align'
	import Image from '@tiptap/extension-image'
	import StarterKit from '@tiptap/starter-kit'
	import css from 'highlight.js/lib/languages/css'
	import js from 'highlight.js/lib/languages/javascript'
	import ts from 'highlight.js/lib/languages/typescript'
	import html from 'highlight.js/lib/languages/xml'

	// 注册 Solidity 语法

	// load all highlight.js languages
	// import hljs from 'highlight.js/lib/core'
	const lowlight = createLowlight(common)
	lowlight.register('html', html)
	lowlight.register('css', css)
	lowlight.register('js', js)
	lowlight.register('ts', ts)
	export default {
		props: {
			content: {
				required: true, // 假设 content 是必需的
			},
			editable: {
				type: Boolean,
				default: false, // 设置默认值为 false
			},
			height: {
				type: String,
				default: '200px', // 设置默认高度值为 '200px'
			},
		},
		components: {
			photoalbum,
			EditorContent,
		},

		data() {
			return {
				photo: false,
				key: 0,
				editor: null,
			}
		},
		methods: {
			image(url) {
				this.editor
					.chain()
					.focus()
					.setImage({ src: 'https://webgallery.oss-cn-beijing.aliyuncs.com/' + url })
					.run()

				this.photo = false
				// 这里把图片插入到编辑器
			},
		},
		mounted() {
			if (this.content) {
				this.editor = new Editor({
					// 工具
					// 是否可编辑
					editable: this.editable,

					content: this.content,
					extensions: [
						StarterKit.configure({
							// Disable an included extension
							codeBlock: false,
						}),
						,
						Underline,
						TextAlign.configure({
							types: ['heading', 'paragraph'],
						}),
						CodeBlockLowlight.configure({
							lowlight,
						}),
						Image,
					],
				})

				//   this.editor.setEditable(true)
			}

			this.editor.on('update', ({ editor }) => {
				const updatedContent = editor.getJSON() // 获取最新的 JSON 内容

				this.content.content = updatedContent.content
				this.$emit('send-data', updatedContent)
			})
		},

		beforeUnmount() {
			this.editor.destroy()
		},
		watch: {
			content(newValue, oldValue) {
				if (newValue != this.editor.getJSON() && !this.editable) {
					this.editor.commands.setContent(newValue)
				}

				// 在 content 变化时执行相应的操作
			},
		},
	}
</script>

<style>
	blockquote {
		padding-left: 5px;
		margin-top: 10px;
		border-left: 3px solid #c8c9cc;
		margin-left: 20px;
	}
	.edibox {
		width: 100%;
		padding: 0 5px;
		border-radius: 0 0 4px 4px;
		border: 1px solid #c8c9cc;
	}

	.tiptap pre {
		position: relative;
		background: #0d0d0d;
		color: #fff;
		font-family: 'JetBrainsMono', monospace;
		margin-top: 10px;
		padding: 30px 10px 10px;
		border-radius: 4px;
	}
	.tiptap img {
		max-width: 100%;
		height: auto;
	}
	.tiptap pre code {
		color: inherit;
		padding: 0;
		background: none;
		font-size: 14px;
	}

	.tiptap pre::before {
		position: absolute;
		word-wrap: break-word;
		top: 10px;
		left: 15px;
		width: 12px;
		height: 12px;
		font-weight: 700;
		font-size: 12px;
		color: rgb(190, 185, 185);
		line-height: 20px;
		white-space: nowrap;
		text-indent: 750px;
		background-color: #fc625d;
		border-radius: 16px;
		box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
		content: '';
	}

	/* .tiptap > * + * {
  margin-top: 0.75em;
} */

	.tiptap ul,
	.tiptap ol {
		padding: 0 1rem;
	}
	.tiptap pre .hljs-comment,
	.tiptap pre .hljs-quote {
		color: #616161;
	}

	.tiptap pre .hljs-variable,
	.tiptap pre .hljs-template-variable,
	.tiptap pre .hljs-attribute,
	.tiptap pre .hljs-tag,
	.tiptap pre .hljs-name,
	.tiptap pre .hljs-regexp,
	.tiptap pre .hljs-link,
	.tiptap pre .hljs-name,
	.tiptap pre .hljs-selector-id,
	.tiptap pre .hljs-selector-class {
		color: #f98181;
	}

	.tiptap pre .hljs-number,
	.tiptap pre .hljs-meta,
	.tiptap pre .hljs-built_in,
	.tiptap pre .hljs-builtin-name,
	.tiptap pre .hljs-literal,
	.tiptap pre .hljs-type,
	.tiptap pre .hljs-params {
		color: #fbbc88;
	}

	.tiptap pre .hljs-string,
	.tiptap pre .hljs-symbol,
	.tiptap pre .hljs-bullet {
		color: #b9f18d;
	}

	.tiptap pre .hljs-title,
	.tiptap pre .hljs-section {
		color: #faf594;
	}

	.tiptap pre .hljs-keyword,
	.tiptap pre .hljs-selector-tag {
		color: #70cff8;
	}

	.tiptap pre .hljs-emphasis {
		font-style: italic;
	}

	.tiptap pre .hljs-strong {
		font-weight: 700;
	}
</style>
<style scoped>
	.iconfont {
		color: #c8c9cc;
	}
	.is-active {
		color: #606266;
		font-weight: bold;
	}
	.toolbar {
		padding: 0 5px;
		border-radius: 4px 4px 0 0;
		border: 1px solid #c8c9cc;
		border-bottom: 0;
		display: flex;
		flex-direction: row;

		gap: 10px;
	}
</style>
